<template>
	<view>
		<u-navbar title="投诉" @rightClick="rightClick" rightText="记录" rightIcon="list-dot" :autoBack="true" placeholder>
		</u-navbar>
		<view class="feedback">
			<u--form class="custom-form" labelPosition="left" labelWidth="100" :labelStyle="formLabelStyle" :model="form"
				:rules="rules" ref="uForm" errorType="message">
				<u-form-item label="类型" borderBottom required>
					<u-radio-group v-model="form.type" placement="row">
						<u-radio activeColor="#eb2e29" label="投诉" :name="1" style="margin-right: 50px;"></u-radio>
						<u-radio activeColor="#eb2e29" label="其他" :name="2"></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="问题和意见" prop="content" required>
					<u--textarea v-model="form.content" class="textArea" placeholder="请输入问题和意见"></u--textarea>
				</u-form-item>
				<u-form-item label=" " prop="img_url" borderBottom>
					<view class="Grid Grid--center">
						<view v-for="(item, index) in form.images" :key="index" style="position: relative; width: 80px; height: 80px; background-color: #f4f5f7; border-radius: 2px; margin: 0 8px 8px 0;">
							<u--image :showLoading="true" :src="item.file_url" width="80px" height="80px"
								mode="aspectFit" @click="previewImage(index)"></u--image>
							<view style="position: absolute; top: 0; right: 0; padding: 5px;"
								@click="() => {
									form.images.splice(index, 1)
								}">
								<u-icon color="rgb(192, 196, 204)" name="close-circle-fill"></u-icon>
							</view>
						</view>
						<view style="width: 80px; height: 80px; background-color: #f4f5f7; border-radius: 2px; margin: 0 8px 8px 0;">
							<view style="width: 80px; height: 80px;" class="Grid Grid--center Grid--justifyCenter press-down-active" @click="imgUrlAfterRead">
								<u-icon name="camera-fill" size="40"></u-icon>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="联系方式" prop="phone">
					<u--input v-model="form.phone" class="phoneInput" placeholder="请输入联系方式"></u--input>
				</u-form-item>
				<view style="padding: 0 4px;">
					<u-button type="primary" class="button_submit" text="提交" @click="submit" :customStyle="{padding: 0}"></u-button>
				</view>
			</u--form>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import navConfig from './config/navConfig.js'
	import normalPagingConfig from './config/normalPagingConfig.js'
	import {
		userAddFile,
		feedbackAdd
	} from '@/service/index.js'

	export default {
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo
			}),
		},
		data() {
			return {
				navConfig,
				normalPagingConfig,
				// form-label-style
				formLabelStyle: {
					fontSize: '12px',
					color: '#2D3338',
					paddingLeft: '12px',
				},
				// 校验规则
				rules: {
					content: [{
						required: true,
						message: '请输入问题和意见',
						trigger: ['blur']
					}]
				},
				form: {
					type: 1,
					title: '',
					content: '',
					phone: '',
					images: []
				}
			};
		},
		onLoad(options) {
			if (options.id) {
				this.form.title = `${options.id}-${options.title}`
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: `${this.userInfo.wechat_info.title}`
			})
		},
		methods: {
			rightClick() {
				uni.navigateTo({
					url: `/pages/user/feedbackList/feedbackList?appid=${this.userInfo.appid}`
				})
			},
			imgUrlAfterRead() {
				uni.chooseImage({
					sizeType: 'compressed',
					count: 9, // 2.2.0 版本起插入图片时支持多张（修改图片链接时仅限一张）
					success: async res => {
						// H5
						console.log(res)
						uni.showLoading({
							title: '上传中'
						});
						const arr = []
						// for (let item of res.tempFilePaths) {
						// 	// 依次上传
						// 	const src = await upload(item, type)
						// 	arr.push(src)
						// }
						for (let file of res
								.tempFiles) {
							console.log(file)
							// 依次上传
							const result =
								await userAddFile({
									// #ifdef H5 || APP-PLUS
									timeout: 60000, // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
									// #endif
									file: file,
									name: 'file',
									formData: {}
								})
							if (result.code ===
								200) {
								arr.push({
									file_url: result.data.file_url,
									file_id: result.data.file_id,
									file_name: result.data.file_name,
									file_size: result.data.file_size,
									file_path: result.data.file_path,
								})
							}
						}
						this.form.images = this.form.images.concat(arr)
					},
					fail: res => {
						console.log("fail")
						console.log(res)
					}
				})
			},
			// 预览方案简介图片
			previewImage(index) {
				let urls = []
				this.form.images.forEach(item => {
					urls.push(item.file_url)
				})
				uni.previewImage({
					current: index,
					urls
				});
			},
			getType() {
				return this.form.type == 1 ? '投诉': '其他'
			},
			async submit() {
				try {
					await this.$refs.uForm.validate()
					this.form.title = this.form.title ? this.form.title : this.getType()
					const result = await feedbackAdd(this.form)
					console.log(result)
					if (result.code == 200) {
						uni.showToast({
							title: '提交成功!',
							icon: 'none'
						})
						this.resetForm()
					}
				} catch (e) {}
			},
			resetForm() {
				this.form = {
					type: 1,
					title: '',
					content: '',
					phone: '',
					images: []
				}
				this.$refs.uForm.clearValidate()
			}
		}
	}
</script>

<style lang="scss">
	.feedback{
		padding: 10px 15px;
		.custom-form {
			border-radius: 8px;
			background: #FFFFFF;
			padding: 15px 15px 15px 30px;
			.button_submit{
				height: 45px;
				background: #EB2E29;
				border-radius: 45px;
				border: none;
				font-size: 18px;
				color: #FFFFFF;
				margin: 20px 0 25px;
			}
			/deep/ .u-form-item{
				.u-line{
					display: none;
				}
			}
		}
	}
	.textArea,.phoneInput{
		border: none;
		background: #F7F7F7 !important;
	}
</style>